<template>
  <div>
    <lan-header :config="headerConfig"></lan-header>
    <lan-search-form
      size="small"
      :config="searchForm"
      :formData="searchFormData"
      @search="search"
    ><template #start="scope">
        <el-date-picker
          class="date-input1"
          size="small"
          v-model="scope.data.start"
          type="datetime"
          placeholder="选择查询开始日期时间"
        ></el-date-picker>&nbsp;&nbsp;至
      </template>
      <template #end="scope">
        <el-date-picker
          class="date-input"
          size="small"
          v-model="scope.data.end"
          type="datetime"
          placeholder="选择查询结束日期时间"
        ></el-date-picker>
      </template>
    </lan-search-form>
  </div>
</template>

<script>
import lanSearchForm from '../../../components/lanSearchForm';
import lanHeader from '../../../components/lanHeader';
import { createAreaApi } from '../../../api/area';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteAreaApi, getAreaListApi } from '../../../api/area';
import { parseError } from '../../../utils';

export default {
  components: {
    lanHeader,
    lanSearchForm
  },
  props: {
    searchFormData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      headerConfig: {
        title: 'MQTT日志'
      },
      searchForm: {
        inline: true,
        size: 'small',
        formList: [
          {
            name: 'centerSn',
            type: 'input',
            placeholder: '主机sn码'
          },
          {
            name: 'keyword',
            type: 'input',
            placeholder: '关键字'
          },
          {
            name: 'start',
            type: 'slot',
            placeholder: '选择查询开始日期时间'
          },
          {
            name: 'end',
            type: 'slot',
            placeholder: '选择查询结束日期时间'
          }
        ]
      }
    };
  },
  methods: {
    search() {
      this.$emit('search');
    }
  }
};
</script>

<style lang="scss" scoped>
.date-input1 {
  margin-right: 6px;
}
</style>
